
var panel;

function resize() {
    if (panel) {
        panel.setSize(window.innerWidth - 28, window.innerHeight - 28);
    }
}

function onload() {
    panel = new Panel('panel');
    panel.init();
    panel.setSize(window.innerWidth - 28, window.innerHeight - 28);
    panel.box(0, 10, 10, 10);
    panel.box(0, panel.getHeight(), 10, 10);
    console.log("Height: " + panel.getHeight());
    console.log("Width: " + panel.getWidth());
}

Panel = function(id) {
    this.canvas = document.getElementById(id);
    this.context = null;
    this.printedHeight = 0;
    this.printedWidth = 0;
};

Panel.prototype.init = function() {
    this.context = this.canvas.getContext("2d");
};

Panel.prototype.getWidth = function() {
    return this.canvas.clientWidth;
};

Panel.prototype.getHeight = function() {
    return this.canvas.clientHeight;
};

Panel.prototype.x = function(x) {
    return x;
};

Panel.prototype.y = function(y) {
    return this.getHeight() - y;
};

Panel.prototype.setSize = function(x, y) {
    this.context.canvas.width = x;
    this.context.canvas.height = y;
    this.canvas.style.width = x + "px";
    this.canvas.style.height = y + "px";
};

Panel.prototype.box = function(x, y, width, height, fill) {
    x = this.x(x);
    y = this.y(y);
    if (fill) {
        this.context.fillRect(x, y, width, height);
    } else {
        this.context.strokeRect(x, y, width, height);
    }
};
